<template>
    <div class="form-group">
        <label :for="inputId">{{ label }}</label>
        <select v-model="selected" @change="onSelectChange" class="form-select">
            <option value="">请选择一个选项</option>
            <option v-for="option in options" :key="option.value" :value="option.value">
                {{ option.label }}
            </option>
            <option v-if="allowCustom" value="custom">自定义输入</option>
        </select>
        <input v-if="selected === 'custom' && inputType === 'text'" :id="inputId" type="text" v-model="customValue"
            class="form-input" placeholder="请输入自定义内容" />
        <input v-if="selected === 'custom' && inputType === 'file'" :id="inputId" type="file" @change="handleFileUpload"
            class="form-input" />
    </div>
</template>

<script>
export default {
    props: {
        label: {
            type: String,
            required: true
        },
        options: {
            type: Array,
            required: true
        },
        inputId: {
            type: String,
            required: true
        },
        allowCustom: {
            type: Boolean,
            default: true
        },
        inputType: {
            type: String,
            default: 'text'
        }
    },
    data() {
        return {
            selected: '',
            customValue: ''
        };
    },
    methods: {
        onSelectChange() {
            if (this.selected !== 'custom') {
                this.customValue = ''; // 清空自定义输入框
            }
        },
        handleFileUpload(event) {
            this.customValue = event.target.files[0];
            this.$emit('update', { value: this.customValue });
        }
    },
    watch: {
        selected(newVal) {
            this.$emit('update', { value: newVal === 'custom' ? this.customValue : newVal });
        },
        customValue(newVal) {
            this.$emit('update', { value: newVal });
        }
    }
};
</script>

<style scoped>
.form-group {
    margin-bottom: 15px;
    font-size: 16px;
}

.form-select {
    height: 100%;
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.form-input {
    height: 100%;
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}
</style>